<template>
  <div class="add-product">
    <el-card class="card">
      <h2 class="page-title">添加商品</h2>
      <el-form :model="product" label-width="120px" class="product-form">
        <el-form-item label="商品名称">
          <el-input v-model="product.name" />
        </el-form-item>

        <el-form-item label="价格">
          <el-input v-model="product.price" type="number" />
        </el-form-item>

        <el-form-item label="描述">
          <el-input v-model="product.description" type="textarea" />
        </el-form-item>

        <el-form-item label="商品分类">
          <el-select v-model="product.category" placeholder="请选择商品类别">
            <el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="商品图片">
          <el-upload
              :action="`${request.defaults.baseURL}/files/upload`"
              :on-success="handleUploadSuccess"
              list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <!-- 批量导入部分 -->
        <el-form-item label="批量导入商品">
          <el-upload
              :action="`${request.defaults.baseURL}/product/import`"
              :on-success="handleBatchUploadSuccess"
              :before-upload="beforeBatchUpload"
              :show-file-list="false"
          >
            <el-button type="primary">上传商品 Excel</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item class="form-buttons">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="$router.push('/manager/products')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request.js";

export default {
  data() {
    return {
      product: {
        name: "",
        price: 0,
        description: "",
        imagePath: "",
        category: "",
      },
      categories: [], // 存储商品类别
    };
  },
  mounted() {
    // 页面加载时请求商品分类数据
    this.fetchCategories();
  },
  methods: {
    fetchCategories() {
      request.get("/Category/selectAll").then(response => {
        this.categories = response.data; // 将返回的分类数据赋值给 categories
      });
    },
    handleUploadSuccess(response) {
      this.product.imagePath = response.data;
    },

    // 处理批量上传文件成功后的回调
    handleBatchUploadSuccess() {
      this.$message.success("商品批量导入成功");
      this.$router.push("/products"); // 导入成功后跳转回商品列表页面
    },

    // 在上传前，可以加一些验证，比如文件类型检查
    beforeBatchUpload(file) {
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          file.type === 'application/vnd.ms-excel';
      if (!isExcel) {
        this.$message.error('只能上传 Excel 文件');
      }
      return isExcel;
    },

    submitForm() {
      request.post("/product/add", this.product).then(() => {
        this.$message.success("商品添加成功");
        this.$router.push("/manager/products");
      });
    },
  },
};
</script>

<style scoped>
.add-product {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.page-title {
  font-size: 28px;
  color: #004f85;
  margin-bottom: 20px;
}

.product-form {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.form-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.el-button.primary {
  background-color: #004f85;
  color: white;
}

.el-button.primary:hover {
  background-color: #005f99;
}

.el-button {
  background-color: #ccc;
  color: #333;
}

.el-button:hover {
  background-color: #888;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
}
</style>
